<template>
    <div class="bottombar">
      <div class="content">
          <div class="title">
            <p>本地音乐(共{{ songList.length }}首)</p>
          </div>
          <div class="cont" v-if="songList.length>0">
              <div class="contItem" v-for="(item,index) in songList" :key="index">
                <div class="left">
                  <img src="../../assets/milaoshu.jpg" alt="">
                  <div class="song">
                    <p>{{ item.songName }}</p>
                    <p>{{ item.singer }}</p>
                  </div>
                </div>
                <div class="right">
                  <img src="../../assets/download.png" alt="">
                  <img src="../../assets/bofang.png" alt="">
                  <img src="../../assets/gengduo.png" alt="">
                </div>
              </div>
          </div>
          <div class="cont" v-else>
              <div class="empty">
                <h3>选择你的本地音乐</h3>
                <p>升级本地音乐，享受更好的品质</p>
                <el-button type="primary">上传本地音乐</el-button>
              </div>
          </div>
      </div>
    </div>
  </template>
  <script>
  export default {
    data() {
        return {
            songList:[
              {
                songName:"不能说的秘密",
                singer:"周杰伦",
              },
              {
                songName:"光年之外",
                singer:"邓紫棋",
              },
              {
                songName:"恋爱告急",
                singer:"鞠婧祎",
              },
              {
                songName:"三国杀",
                singer:"汪苏泷",
              },
              {
                songName:"素颜",
                singer:"许嵩",
              },
              {
                songName:"戒烟",
                singer:"李荣浩",
              },
              {
                songName:"算什么男人",
                singer:"周杰伦",
              },
              {
                songName:"天空没有极限",
                singer:"邓紫棋",
              },
              {
                songName:"一天一天",
                singer:"bigbang",
              },
              {
                songName:"叹云兮",
                singer:"鞠婧祎",
              },
              {
                songName:"流星雨又来临",
                singer:"魏晨",
              },
              {
                songName:"拾亿",
                singer:"张翰",
              },
              {
                songName:"一笑倾城",
                singer:"汪苏泷",
              },
            ],
        };
    },
  }
  </script>
  <style lang="scss" scoped>
   .bottombar{
      width:calc(100vw - 230px);
    }
    .cont::-webkit-scrollbar {
      width: 0;
    }
     .cont{
        overflow-y:auto;
        height:calc(100vh - 160px);
        .empty{
          display:flex;
          flex-direction:column;
          align-items:center;
          justify-content:center;
          margin-top:100px;
        }
        .contItem{
          display:flex;
          align-items:center;
          justify-content:space-between;
          border-top:1px solid #f0f0f0;
          .left{
            display:flex;
            align-items:center;
            img{
              width:30px;
              height:30px;
            }
            .song{
              margin-left:10px;
              line-height:20px;
              p{
                font-size:12px;
              }
              p:nth-child(2){
                margin-top:-10px;
              }
            }
          }
          .right{
            img{
              margin:0 10px;
              width:20px;
              height:20px;
            }
          }
        }
      }
  </style>
  